<template>
<div class="product">
  <van-nav-bar title="我的产品" left-span="返回" left-arrow @click-left="onClickLeft" fixed />
  <div class="nav flex-center">
    <div class="info">已有产品(2个)</div>
  </div>
  <div class="content">
    <div class="content-item">
      <img class="item-img" src="@/assets/img/蔬菜.png">
      <span class="item-name">大冬瓜</span>
      <span class="item-desc">大冬瓜吃多了会变大</span>
    </div>
    <div class="content-item">
      <img class="item-img" src="@/assets/img/蔬菜.png">
      <span class="item-name">大冬瓜</span>
      <span class="item-desc">大冬瓜吃多了会变大</span>
    </div>
    <div class="content-item" style="justify-content: center;">
      <div class="item-add" @click="$router.push({ name: 'productAdd' })">
        <img class="item-Aimg" src="@/assets/img/添加 (1).png">
        <span class="item-Aname">添加产品</span>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'product',
  methods: {
    onClickLeft() {
      this.$router.push({
        name: 'main'
      })
    },
  },
}
</script>

<style scoped>
.product {
  margin-top: 46px;
  position: absolute;
  width: 375px;
  background: linear-gradient(0deg, rgba(194, 228, 253, 0) 0%, #dcfad6 56%, #c2f3c9 100%);
}

.nav {
  display: flex;
  align-items: center;
  width: 337px;
  height: 35px;
  margin: 0 auto;
  margin-top: 30px;
  justify-content: space-between;
  font-size: 14px;
  color: #FFFFFF;

}

.content {
  width: 337px;
  margin: 10px auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.content-item {
  display: flex;
  flex-direction: column;
  width: 160px;
  height: 130px;
  background: #FFFFFF;
  box-shadow: 0px 3px 14px rgba(78, 112, 184, 0.07);
  border-radius: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  box-sizing: border-box;

}

.item-img {
  width: 60px;
  height: 60px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.item-name {
  margin-left: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #2C2E34;
  width: 130px;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-desc {
  margin-left: 12px;
  margin-right: 7px;
  font-size: 12px;
  line-height: 17px;
  font-weight: 400;
  color: #6A6F7A;
  word-wrap: break-word;
}

.item-add {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 23px 0;
}

.item-Aimg {
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
}

.item-Aname {
  font-size: 14px;
  font-weight: bold;
  line-height: 13px;
  color: #2C2E34;
}
</style>
